<template>
  <div class="person-info">
    <div :style="{ backgroundImage: `url(${data.faceUrl})` }" class="avatar"/>
    <div class="infos">
      <div class="name-box">
        <div class="name">
          {{ data.XM }}
        </div>
        <div v-if="data.XBM" class="sex-icon">
          <woman-outlined v-if="data.XBM === '女性'"/>
          <man-outlined v-else/>
        </div>
      </div>
      <div class="info-wrap">
        性别：{{ data.XBM }}
      </div>
<!--      <div class="info-wrap">-->
<!--        学院：&#45;&#45;信息技术学院-->
<!--      </div>-->
      <div class="info-wrap">
        专业：{{ data.XNZYMC }}
      </div>
      <div class="info-wrap">
        班级：{{ data.BJMC }}
      </div>
      <div class="info-wrap">
        学号：{{ data.XH }}
      </div>
    </div>
  </div>
</template>

<script setup>
import {ManOutlined, WomanOutlined} from "@ant-design/icons-vue";

// eslint-disable-next-line no-undef
defineProps({
  avatar: {
    type: String,
    default: "https://img.mp.sohu.com/upload/20170512/c106a6f17bf04d7da46084eec1513a3b_th.png",
  },
  data: {
    type: Object,
    default: () => {
    },
  },
});
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
